import React, { useState } from 'react';
import style from './Xiang.module.css';
import { useNavigate } from 'react-router-dom';
export default function Xiang() {
    const navigate = useNavigate();
  const [items, setItems] = useState([
    {
      id: 1,
      shop: '阿玛尼旗舰店',
      name: 'JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...',
      spec: '5513藏青色;XL',
      price: 4.99,
      quantity: 1,
      selected: true
    },
    {
      id: 2,
      shop: '阿玛尼旗舰店',
      name: 'JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...',
      spec: '5513藏青色;XL',
      price: 4.99,
      quantity: 1,
      selected: true
    },
    {
      id: 3,
      shop: '阿玛尼旗舰店',
      name: 'JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...',
      spec: '5513藏青色;XL',
      price: 8.99,
      quantity: 1,
      selected: true
    }
  ]);

  const [allSelected, setAllSelected] = useState(true);

  const toggleSelect = (id) => {
    setItems(items.map(item => 
      item.id === id ? {...item, selected: !item.selected} : item
    ));
  };

  const toggleAll = () => {
    setAllSelected(!allSelected);
    setItems(items.map(item => ({...item, selected: !allSelected})));
  };

  const updateQuantity = (id, newQuantity) => {
    if (newQuantity < 1) return;
    setItems(items.map(item => 
      item.id === id ? {...item, quantity: newQuantity} : item
    ));
  };

  const totalPrice = items.reduce((sum, item) => 
    item.selected ? sum + item.price * item.quantity : sum, 0
  );

  return (
    <div className={style.container}>
      {/* 顶部标题和地址 */}
      <div className={style.header}>
        <div className={style.title}>购物车</div>
        <div className={style.info}>
          <span>共42件宝贝</span>
          <span className={style.address}>收货地址: 长江一号B组团...</span>
        </div>
      </div>

      {/* 商品列表 */}
      <div className={style.itemList}>
        {items.map(item => (
          <div key={item.id} className={style.item}>
            <div 
              className={`${style.checkbox} ${item.selected ? style.checked : ''}`}
              onClick={() => toggleSelect(item.id)}
            >
              {item.selected && '✓'}
            </div>
            
            <div className={style.itemContent}>
              <div className={style.shopName}>{item.shop}</div>
              <div className={style.productName}>{item.name}</div>
              <div className={style.spec}>{item.spec}</div>
              
              <div className={style.priceRow}>
                <div className={style.price}>￥{item.price.toFixed(2)}</div>
                <div className={style.quantity}>
                  <button 
                    className={style.quantityBtn}
                    onClick={() => updateQuantity(item.id, item.quantity - 1)}
                  >-</button>
                  <span className={style.quantityNum}>{item.quantity}</span>
                  <button 
                    className={style.quantityBtn}
                    onClick={() => updateQuantity(item.id, item.quantity + 1)}
                  >+</button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 底部结算栏 */}
      <div className={style.footer}>
        <div className={style.footerContent}>
          <div 
            className={`${style.checkbox} ${allSelected ? style.checked : ''}`}
            onClick={toggleAll}
          >
            {allSelected && '✓'}
          </div>
          <span className={style.selectAll}>全选</span>
          
          <div className={style.total}>
            <div className={style.totalPrice}>
              合计: <span className={style.price}>￥{totalPrice.toFixed(2)}</span>
            </div>
            <div className={style.discount}>
              已优惠￥0.00,不含运费和税费
            </div>
          </div>
          
          <button className={style.checkoutBtn}>结算</button>
        </div>
      </div>

      {/* 底部导航栏 */}
      <div className={style.bottomNav}>
        <div className={style.navItem}>
          <div className={style.navIcon} onClick={() => navigate('/homepage')}>首</div>
          <div className={style.navText}>首页</div>
        </div>
        <div className={style.navItem}>
          <div className={style.navIcon}>发</div>
          <div className={style.navText}>发现</div>
        </div>
        <div className={style.navItem}>
          <div className={style.navIcon}>会</div>
          <div className={style.navText}>会员</div>
        </div>
        <div className={`${style.navItem} ${style.active}`}>
          <div className={style.navIcon} onClick={() => navigate('/xiang')}>购</div>
          <div className={style.navText}>购物车</div>
        </div>
        <div className={style.navItem}>
          <div className={style.navIcon}>我</div>
          <div className={style.navText}>我的</div>
        </div>
      </div>
    </div>
  );
}